<template>
    <div class="common-size standingBook_finkDisk">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="page-chart page-chart3">
                <div ref="useAgeLimitDom" class="chart-box">
                    <div class="right-title">医信精盘 精准对账</div>
                    <div class="bottom-title">设备管理提升空间分析</div>
                    <div class="pyramid_png">
                        <div class="new-percent">{{chartDataTable.new_percent ? chartDataTable.new_percent + '%' : '0%'  }}</div>
                        <div class="old-percent">{{chartDataTable.old_percent ? chartDataTable.old_percent + '%' : '0%' }}</div>
                    </div>
                </div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in textData">
                </div>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  export default {
    name: 'standingBook_finkDisk',
    props:['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '台帐情况',
        detailTitle: '医信精盘'
      }
    },
    computed:{
      chartDataTable () {
        return this.chartData.chartData || {}
      },
      textData () {
        return this.chartData.textData
      },
      oneRemarkData () {
        return this.chartData.remark
      }
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      deviceNumChart () {
        const  deviceNumData = this.chartData.chartData
      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .standingBook_finkDisk {
        .page-content {
            margin-top: 10px;
            .page-chart {
                margin-bottom: 35px;
                position: relative;
                .chart-box {
                    width: 100%;
                    height: 100%;
                    .right-title {
                        position: absolute;
                        right:3%;
                        top:0;
                        bottom: 0;
                        display: flex;
                        font-size: 22px;
                        color: #333;
                        writing-mode:vertical-rl;
                        align-items: center;
                        justify-content: center;
                    }
                    .bottom-title {
                        position: absolute;
                        bottom: 35px;
                        right: 0;
                        left: 0;
                        text-align: center;
                        font-size: 14px;
                        color: #666;
                    }
                    .pyramid_png {
                        background: url("../assets/images/pyramid_png.png") no-repeat;
                        width: 63%;
                        height: 296px;
                        position: absolute;
                        top:14%;
                        left: 14%;
                        background-size: contain;
                        .new-percent {
                            color: #333;
                            font-size: 22px;
                            font-weight: bold;
                            position: absolute;
                            right: -8%;
                            top: 17%;
                            text-align: center;
                            width: 16%;
                        }
                        .old-percent {
                            color: #333;
                            font-size: 22px;
                            font-weight: bold;
                            position: absolute;
                            right: -8%;
                            top: 49%;
                            text-align: center;
                            width: 16%;
                        }
                    }
                }
            }
            .describe_box {
                .describe-text {
                    text-indent:2em;
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:30px !important;
                }
            }
        }
    }
</style>
